<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>商品添加页面</title>

<link href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
	<div align="center">
		<div align="center">
			<h1>商品信息</h1>
		</div>
		<form id="goodsForm" enctype="multipart/form-data">
			<input type="hidden" name="id" id="id" value="${goods.id}">
			<div>
				<p>
				<c:if test="${not empty goods.imgUrl}">
					<span><img alt="图片预览" src="${goods.imgUrl}" height="50"> </span>
				</c:if>
				商品图片上传：<input type="file" name="file" id ="imgUrl"/>
				</p>
				<p>
					商品名称：<input type="text" name="name" value="${goods.name}">
				</p>
				<p>
					英文名称：<input type="text" name="ename" value="${goods.ename}">
				</p>
				<p>
				商品品牌：<select name="brandId">
					<c:forEach items="${brands}" var="brand">
					<option value="${brand.id}" <c:if test="${brand.name == goods.brandName}">selected</c:if>>${brand.name }</option>
					</c:forEach>
				</select>
				</p>
				<p>
				商品种类：<select name="goodskindId">
					<c:forEach items="${kinds}" var="kind">
					<option value="${kind.id}" <c:if test="${kind.name == goods.kindName}">selected</c:if>>${kind.name }</option>
					</c:forEach>
				</select>
				</p>
				<p>
					尺寸：<input type="text" name="size" value="${goods.size}">
				</p>
				<p>
					单价（元）：<input type="text" name="price" value="${goods.price}">
				</p>
				<p>
					数量：<input type="text" name="amount" value="${goods.amount}">
				</p>
				<p>
					标签：<input type="text" name="tag" value="${goods.tag}">
				</p>
				<p>
					<button type="button" id="goodsBtn">提交</button>
				</p>
			</div>
		</form>
	</div>
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
	<script type="text/javascript">
			$('#goodsBtn').click(function() {
				// 创建FormData对象
		        var data = new FormData($('#goodsForm')[0]);

		        // 为FormData对象添加数据
		        $.each($('#imgUrl')[0].files, function(i, file) {
		            data.append('file', file);
		        });
				$.ajax({
					type : "POST", //提交的方法
					url : "/edit", //提交的地址  
					data : data,// 序列化表单值  
					async : false,
					contentType: false,        /* 不可缺 */
		            processData: false,         /* 不可缺 */
					dataType:"json",
					success : function(data) { //成功
						alert(data.message); //就将返回的数据显示出来
						//添加成功后刷新页面
						location = "/";
					},
				error : function() { //失败的话
					alert("Connection error");
				}
				});
			});
	</script>
</body>
</html>